<template>
  <div class="goods-detail">
    <!-- 头部 -->
    <myhander titleName="商品详情"></myhander>
    <mt-swipe class="swiperbox">
      <mt-swipe-item v-for="(item,index) in imgList" :key="index"><img :src="item.src" alt=""></mt-swipe-item>
    </mt-swipe>
    <div>
      <h4 class="goods-title">{{goodsInfo.title}}</h4>
      <p class="goods-price">
        <span class="market-price">原价：${{goodsInfo.market_price}}</span>
        <span class="sell-price">秒杀价：${{goodsInfo.sell_price}}</span>
      </p>
    </div>
    <div class="goods-info">
      <h4 class="goods-desc">商品参数</h4>
      <p>商品编号:{{goodsInfo.goods_no}}</p>
      <p>库存:{{goodsInfo.stock_quantity}}</p>
      <p>上架时间:{{goodsInfo.add_time | fmtTime}}</p>
    </div>
    <mt-button type="primary" size="large" class="mt-5">图文介绍</mt-button>
    <mt-button type="danger" size="large" class="mt-5">商品评论</mt-button>
    <div class="goods-footer">
      <div class="goods-footer-item contact"><span class="iconfont icon-kefu"></span><span>联系客服</span></div>
      <div class="goods-footer-item cart">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
        <span class="badge">{{totalNum}}</span>
      </div>
      <div class="goods-footer-item add" @click="addShop"><span>加入购物车</span></div>
      <div class="goods-footer-item buy" @click="jumpTo('cart')"><span>立即购买</span></div>
    </div>
  </div>
</template>
<script>
import {getThumb, getgoodsinfo, getShopInfo} from '@/api'
import myhander from '@/components/myhander'
export default {
  components: {
    myhander
  },
  data () {
    return {
      id: this.$route.params.id,
      imgList: [], // 轮播图
      goodsInfo: [], // 商品信息
      cartListPage: []// 获取本地的数组信息

    }
  },
  mounted () {
    // 获取商品详情和轮播图数据
    this.initShopList()
    this.initGoodsInfo()
    // 页面一进去就加载的数据
    this.cartListPage = JSON.parse(localStorage.getItem('cartList') || '[]')
  },
  // 创建全局计算属性
  computed: {
    totalNum () {
      let total = 0
      this.cartListPage.map(item => {
        total += item.num
      })
      return total
    }
  },
  methods: {
    jumpTo (pathName) {
      this.$router.push({name: pathName})
    },
    // 初始化轮播图
    initShopList () {
      getThumb(this.id).then(res => {
        // console.log(res)
        this.imgList = res.message
      })
    },
    initGoodsInfo () {
      getgoodsinfo(this.id)
        .then(res => {
          // console.log(res)
          this.goodsInfo = res.message[0]
        })
    },
    // 加入购物车
    addShop () {
      // 1.2 先判断本地有没有当前添加的那个商品，如果没有，就直接将该商品信息（id,选中状态，图片，标题，价格，数量）添加至本地；如果有，就将该商品的数量加1
      let cartList = JSON.parse(localStorage.getItem('cartList') || '[]')
      getShopInfo(this.id).then(res => {
        console.log(res)
        let tempObj = {
          id: res.message[0].id,
          img: res.message[0].thumb_path,
          title: res.message[0].title,
          price: res.message[0].sell_price,
          selectState: true,
          num: 1
        }
        // 1.2.3 判断本地取回的数组中，是否存在上面id的那个商品。 利用findIndex来找，看是否存在那个id项对应的索引，如果存在，就返回该索引；如果不存在就返回-1
        let idx = cartList.findIndex(item => item.id === res.message[0].id)
        if (idx === -1) {
          // 不存在，就直接push进数组中
          cartList.push(tempObj)
        } else {
          cartList[idx].num += 1
        }
        console.log(cartList)
        // 1.3 将新的数据存入本地
        localStorage.setItem('cartList', JSON.stringify(cartList))
        // 1.6 将本地存储的数据与页面保持一致, 目的是用于num总数的更新
        this.cartListPage = cartList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-detail {
  margin-bottom: 50px;
  padding: 0 10px;
}
.swiperbox {
  height: 300px;
  img {
    width: 100%;
  }
}

.goods-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.goods-price {
  font-size: 14px;
  .market-price {
    text-decoration: line-through;
  }
  .sell-price {
    color: #e4393c;
  }
}

.goods-info {
  font-size: 14px;
   .goods-desc {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
  }
}

.goods-footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #e7e7e7;
  background-color: #fff;
  .goods-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .contact, .cart {
    width: 40%;
    font-size: 12px;
    position: relative;
  }
  .badge {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #e4393c;
    text-align: center;
    line-height: 14px;
    color: white;
  }
  .add, .buy {
    width: 60%;
    color: white;
    &>span {
      font-size: 20px;
    }
  }
  .add {
    background-color: #ff9600;
  }
  .buy {
    background-color: #e4393c;
  }
}
.mt-5{
  margin-top: 5px
}
</style>
